<template>
  <div class="organization-container">
    <el-card shadow="never">
      <!-- <div class="flex-start"><el-button size="small" type="primary" @click="add">新增组织架构</el-button></div> -->
      <el-table :data="treeData" row-key="id" border style="margin-top: 10px" :expand-row-keys="expandRowKeys">
        <!-- <el-table-column prop="id" label="id" /> -->
        <el-table-column prop="name" label="部门" />
        <!-- <el-table-column prop="parentId" label="父节点id" /> -->
        <!-- <el-table-column prop="createTime" label="创建时间" /> -->
        <!-- <el-table-column label="操作" width="208">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="add(scope.row)">新增</el-button>
            <el-button v-if="scope.row.parentId !== 0" size="mini" type="warning" @click="edit(scope.row)">修改</el-button>
            <el-button v-if="scope.row.parentId !== 0" size="mini" type="danger" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </el-card>
    <Dialog ref="dialog" :update="getDeptList" :tree-list="treeList" :tree-data="treeData" />
  </div>
</template>

<script>
import { internetApi } from '@/api/api'

export default {
  components: {
    Dialog: () => import('./dialog')
  },
  data() {
    return {
      treeData: [],
      treeList: []
    }
  },

  computed: {
    expandRowKeys() {
      return this.treeData.map((item) => item.id)
    }
  },
  mounted() {
    this.getDeptList()
  },

  methods: {
    async getDeptList() {
      const { data } = await this.$request(internetApi.getDeptList)
      // const rootId = data[0].parentId
      this.treeList = data
      this.treeData = this.$utils.arrayToTree(data, { pid: 'parentId', rootId: 0 })
    },
    //新增
    add(row) {
      this.$refs.dialog.open('add', row)
    },
    //编辑
    edit(row) {
      this.$refs.dialog.open('edit', row)
    },
    //删除
    del(row) {
      //提示框二次确认
      this.$confirm(`你确定要删除${row.name}吗?`, { type: 'warning' })
        .then(async () => {
          await this.$request(internetApi.deleteDeptInfo, { deptId: row.id })
          this.getDeptList()
          this.$message.success('操作成功')
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.organization-container {
  height: calc(100vh - 205px);
  overflow: auto;
}
</style>
